<template>
  <el-dialog
    v-model="propOptions.isShow"
    :title="propOptions.title"
    width="50%"
    draggable
  >
    <el-form class="prop_form_box" :model="formData">
      <el-row :gutter="0">
        <el-col
          v-for="(item, index) in propformHeard"
          v-show="!item.isHide"
          :key="index"
          :span="item.colSpan"
        >
          <!-- 输入框 -->
          <template v-if="item.type === 'input' && item.hide !== true">
            <el-form-item
              :label="item.label"
              :prop="item.key"
              :label-width="item.labelWidth"
            >
              <el-input
                v-model="formData.name"
                :type="item.inputType"
                :maxlength="item.maxlength ? item.maxlength : 255"
                :placeholder="item.placeholder ? item.placeholder : '请输入'"
              />
            </el-form-item>
          </template>
          <!-- 下拉选项 -->
          <template v-if="item.type === 'select' && item.hide !== true">
            <el-form-item
              :label="item.label"
              :rules="[
                {
                  required: item.isRequired ? true : false,
                  message: '请选择',
                  trigger: 'change',
                },
              ]"
              :prop="item.key"
              :label-width="item.labelWidth"
            >
              <el-select
                :ref="item.key"
                v-model="formData[item.key]"
                class="w-full"
                :multiple="item.multiple ? true : false"
                collapse-tags
                filterable
                clearable
                placeholder="请选择"
                :default-first-option="false"
                :disabled="item.disabled"
                @change="(v: any) => {
                  changeSelect(v, item)
                }"
              >
                <el-option
                  v-for="(option, optionIndex) in item.option"
                  :key="optionIndex"
                  :value="option.id"
                  :label="
                    option.code
                      ? `${option.code} - ${option.name}`
                      : option.name
                  "
                >
                </el-option>
              </el-select>
            </el-form-item>
          </template>
          <!-- 单选按钮 -->
          <template v-if="item.type === 'radio' && item.hide !== true">
            <el-form-item
              :label="item.label"
              :rules="[
                {
                  required: item.isRequired ? true : false,
                  message: '请选择',
                  trigger: 'change',
                },
              ]"
              :prop="item.key"
              :label-width="item.labelWidth"
            >
              <div class="textBox">
                <el-radio-group v-model="formData[item.key]">
                  <el-radio
                    v-for="(option, index) in item.option"
                    :key="index"
                    :label="option.id"
                    >{{ option.name }}</el-radio
                  >
                </el-radio-group>
              </div>
            </el-form-item>
          </template>
          <!-- 日期控件 -->
          <template v-if="item.type === 'time' && item.hide !== true">
            <el-form-item
              :label="item.label"
              :rules="[
                {
                  required: item.isRequired ? true : false,
                  message: '请选择',
                  trigger: 'change',
                },
              ]"
              :prop="item.key"
              :label-width="item.labelWidth"
            >
              <el-date-picker
                v-model="formData[item.key]"
                :type="item.datetime"
                :format="item.format"
                :value-format="item.format"
                :placeholder="item.placeholder"
              >
              </el-date-picker>
            </el-form-item>
          </template>
          <!-- 菜单树形选择器 -->
          <!-- <template v-if="item.type === 'menuTree'">
            <el-form-item
              :label="item.label"
              :rules="[
                {
                  required: item.isRequired ? true : false,
                  message: '请选择',
                  trigger: 'change',
                },
              ]"
              :prop="item.key"
              :label-width="item.labelWidth"
            >
              <el-cascader
                :disabled="item.disabled"
                v-model="formData[item.key]"
                :options="menuOpting"
                :props="{
                  checkStrictly: true,
                  value: 'id',
                  label: 'title',
                  emitPath: false,
                  children: 'child',
                }"
                clearable>
                <template slot-scope="{ node, data }">
                  <span>{{ data.title }}</span>
                  <span v-if="data.child"> ({{ data.child.length }}) </span>
                </template>
              </el-cascader>
            </el-form-item>
          </template> -->
          <!-- 图片上传 -->
          <template v-if="item.type === 'uplaodImg'">
            <el-form-item
              class="uplaodImg"
              :label="item.label"
              :rules="[
                {
                  required: item.isRequired ? true : false,
                  message: ' ',
                  trigger: 'change',
                },
              ]"
              :prop="item.key"
              :label-width="item.labelWidth"
            >
              <el-upload
                :disabled="item.disabled"
                class="avatar-uploader"
                :action="uploadImgUrl"
                :limit="3"
                :show-file-list="false"
                :on-success="
                  (res, file) => {
                    handleAvatarSuccess(res, file, item.key)
                  }
                "
                :headers="uploadHeaders"
                :data="{ type: 4, thumbnailMark: 'sku' }"
                :before-upload="beforeAvatarUpload"
              >
                <img
                  v-if="formData[`${item.key}Str`]"
                  :src="formData[`${item.key}Str`]"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </template>
          <!-- 多图上传 -->
          <template v-if="item.type === 'uplaodImgs'">
            <el-form-item
              class="uplaodImg uplaodImgS"
              :label="item.label"
              :rules="[
                {
                  required: item.isRequired ? true : false,
                  message: ' ',
                  trigger: 'change',
                },
              ]"
              :prop="item.key"
              :label-width="item.labelWidth"
            >
              <el-upload
                :disabled="item.disabled"
                class="avatar-uploader"
                :action="uploadImgUrl"
                list-type="picture-card"
                :show-file-list="true"
                :on-success="
                  (res, file) => {
                    handleAvatarSuccess(res, file, item.key, 'imgs')
                  }
                "
                :headers="uploadHeaders"
                :file-list="formData[item.key]"
                :data="{ type: 4 }"
                :limit="item.limit"
                :on-exceed="handExceed"
                :before-remove="
                  (res, fileList) => {
                    beforeRemoveImg(res, fileList, item.key)
                  }
                "
                :on-preview="handlePictureCardPreview"
                :before-upload="beforeAvatarUpload"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog v-model:visible="dialogImgVisible">
                <img width="100%" :src="dialogImageUrl" alt="" />
              </el-dialog>
            </el-form-item>
          </template>
          <!-- 颜色选择器 -->
          <template v-if="item.type === 'color'">
            <el-form-item
              :label="item.label"
              :prop="item.key"
              :label-width="item.labelWidth"
            >
              <el-color-picker v-model="formData[item.key]"></el-color-picker>
            </el-form-item>
          </template>
          <!-- 文本 -->
          <template v-if="item.type === 'text'">
            <el-form-item
              class="text_item"
              :label="item.label"
              :prop="item.key"
              :label-width="item.labelWidth"
            >
              <div class="textBox">{{formData[item.key]}}</div>
            </el-form-item>
          </template>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="propOptions.isShow = false">关闭</el-button>
        <el-button type="primary" @click="submitConfirm">提交</el-button>
      </span>
    </template>
  </el-dialog>
  <!-- <div class="header">
    <slot name="header"></slot>
  </div>
  <el-form :model="form" :label-width="props.labelWidth || '20px'">
    <el-row :gutter="20">
      <template v-for="(item, index) in props.formData" :key="index">
        <el-col v-bind="colLayout">
          <el-form-item :label="item.label">
            <template
              v-if="
                item.components === 'input' || item.components === 'password'
              "
            >
              <el-input
                v-model="form[`${item.field}`]"
                :placeholder="item.placeholder"
                :show-password="item.components === 'password'"
                v-bind="item.otherOptions"
              ></el-input>
            </template>
            <template v-if="item.components === 'select'">
              <el-select
                v-model="form[`${item.field}`]"
                :placeholder="item.placeholder"
                clearable
                filterable
                v-bind="item.otherOptions"
                style="width: 100%"
              >
                <el-option
                  v-for="_ in item.options"
                  :key="_.value"
                  :label="_.label"
                  :value="_.value"
                >
                </el-option>
              </el-select>
            </template>
            <template v-if="item.components === 'datepicker'">
              <el-date-picker
                v-model="form[`${item.field}`]"
                type="daterange"
                range-separator="-"
                v-bind="item.otherOptions"
                style="width: 100%"
              />
            </template>
          </el-form-item>
        </el-col>
      </template>
    </el-row>
  </el-form>
  <div class="footer">
    <slot name="footer"></slot>
  </div> -->
</template>

<script lang="ts" setup>
import { useVModel } from '@vueuse/core'
import type { IFormOption, IFormHeard } from './../types'
import { encodeProxyData } from '/@/utils/tool'
import { toRaw, reactive } from 'vue'

interface Props {
  // labelWidth?: string
  // modelValue: any
  propOptions?: IFormOption
  propformHeard?: IFormHeard
  propSubmit: void
  propSelect: void
}
const props = defineProps<Props>()
console.log(props)

const emits = defineEmits(['update:propOptions'], ['update:formData'])
const propOptions = useVModel(props, 'propOptions', emits)
const propformHeard = useVModel(props, 'propformHeard', emits)
// const formData = ref({})
console.log(propformHeard)

const options = encodeProxyData(propformHeard.value)
const data = {}
if (options) {
  options.forEach((option: any) => {
    data[option.key] = option.value
  })
}
const formData = reactive(data)
// console.log(formData)
// 初始化表单数据
// const initFromData = () => {
//   // formData
//   const options = encodeProxyData(propformHeard.value)
//   console.log(formData)
//   if (options) {
//     options.forEach((option: any) => {
//       formData.value[option.key] = option.value
//     })
//   }
//   console.log(formData)
// }

// initFromData()

const changeSelect = (v: any, item: any) => {
  console.log(v)
  props.changeSelect({
    value: v,
    key: item.key,
    item,
    done(key, value) {
      self.formData[key] = value
    },
  })
}

const submitConfirm = () => {
  const jsonData = toRaw(formData)
  props.propSubmit(jsonData)
}
// const emits = defineEmits(['update:modelValue'])
// const form = useVModel(props, 'modelValue', emits)
// // 清空数据的方法
// const clearAllValue = () => {
//   const map: IStringObject = {
//     '[object String]': '',
//     '[object Array]': [],
//   }
//   for (const i in form.value) {
//     const typeValue = Object.prototype.toString.call(form.value[i])
//     form.value[i] = map[typeValue]
//   }
// }
// defineExpose({
//   // 可以通过ref的方式的访问
//   clearAllValue,
// })
</script>
